<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>内容列表</title>
    <link rel="stylesheet" type="text/css" th:href="@{/plugins/bootstrap/css/bootstrap.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/css/scrollUp.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/css/doc.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/css/bootIndex.css}"/>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script th:src="@{/plugins/jquery/jquery.min.js}" type="text/javascript" charset="utf-8"></script>
    <script th:src="@{/plugins/bootstrap/js/bootstrap.js}" type="text/javascript" charset="utf-8"></script>
    <script th:src="@{/plugins/bootstrap-paginator.min.js}"></script>
</head>
<body>
    <div th:include="include::fgNav">
    </div>

    <div class="container mainPad">
        <table class="table table-hover">
            <tr>
                <th>内容ID</th>
                <th>内容名称</th>
                <th>内容</th>
                <th>内容标签</th>
                <th>创建时间</th>
                <th>操作</th>
            </tr>
            <tr th:each="content : ${contents}">
                <td th:text="${content.contentId}"></td>
                <td th:text="${content.contentName}"></td>
                <td th:text="${content.contentText}"></td>
                <td th:text="${content.contentTag}"></td>
                <td th:text="${#calendars.format(content.createTime,'yyyy-MM-dd HH:mm:ss')}"></td>
                <td>
                    <a th:onclick="'javascript:deleteContent(\'' + ${content.contentId} + '\');'" >删除</a>
                </td>
            </tr>
        </table>

        <div class="row">
            <div class="col-md-8">
                <div id="htmlDiv"></div>
                <div class="col-lg-12" align="center">
                    <ul id="pageButton"></ul>
                </div>
            </div>
            <div class="col-md-4">

            </div>
        </div>
    </div>

    <div th:include="include::fgFooter">
    </div>

    <div th:include="include::fgScrollUp">
    </div>

    <script>
        function deleteContent(contentId) {
            $.post('/v1/content/deleteContent',{
                contentId : contentId
            }, function (data) {
                if (data.code === 0) {
                    alert("删除成功！");
                }
                window.location.reload();
            }, "json");
        }

        // 主题列表
        function initTopic(page) {
            $.ajax({
                url : '/v1/topic/selectTopics',
                type : 'POST',
                data : {
                    page : page
                },
                dataType : "json",
                success : function(data) {
                    appendHtml(data.list);
                    var element = $('#pageButton');
                    var options = {
                        bootstrapMajorVersion : 3,
                        currentPage : page, // 当前页数
                        numberOfPages : 5, // 显示按钮的数量
                        totalPages : data.pages, // 总页数
                        itemTexts : function(type, page, current) {
                            switch (type) {
                                case "first":
                                    return "首页";
                                case "prev":
                                    return "上一页";
                                case "next":
                                    return "下一页";
                                case "last":
                                    return "末页";
                                case "page":
                                    return page;
                            }
                        },
                        onPageClicked : function(event, originalEvent, type, page) {
                            initTopic(page);
                        }
                    };
                    if (data.list.length > 0) {
                        element.bootstrapPaginator(options);
                    }
                }
            })
        }

        // 数据拼接
        function appendHtml(list) {
            var html = "";
            if (list.length > 0) {
                for (var i = 0; i < list.length; i++) {
                    html +=
                        "<div class='panel panel-default'>"
                        + list[i].topicName + "<br/>"
                        + list[i].topicDesc
                        + "<a class='pull-right' onclick='getContents("+ list[i].id+")'>阅读更多</a>"
                        +"</div>";
                }
            } else {
                html += "<div class='container empty-msg'>没有找到符合相关条件的记录!</div>";
            }
            $('#htmlDiv').html(html);
        }

    </script>
</body>
</html>